<template>
<div class="container">
    <div class="body-top">
        <div class="top-title">首页</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="背景图及Banner" name="first">
                <Banner></Banner>
            </el-tab-pane>
            <el-tab-pane label="轮播页配置" name="second">
                <Banner-config></Banner-config>
            </el-tab-pane>
            <el-tab-pane label="清风论坛" name="third">
                <Forum></Forum>
            </el-tab-pane>
            <el-tab-pane label="举报信息" name="fourth">
                <Report></Report>
            </el-tab-pane>
            <el-tab-pane label="友情链接" name="five">
                <Links></Links>
            </el-tab-pane>
            <el-tab-pane label="二维码管理" name="six">
                <QRCode></QRCode>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script>
import Banner from "./Banner/Banner";
import BannerConfig from "./BannerConfig/BannerConfig";
import Forum from "./Forum/Forum";
import Report from "./Report/Report";
import Links from "./Links/Links";
import QRCode from "./QRCode/QRCode";

export default {
    components: {
        Banner,
        BannerConfig,
        Forum,
        Report,
        Links,
        QRCode
    },
    data() {
        return {
            activeName: this.$store.state.PortalManagement.HomeActive,
        };
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
            this.$store.commit("PortalManagement/HOME_ACTIVE", tab.name)
        }
    }
};
</script>

<style lang="less" scoped>
.body-top {
    .top-title {
        width: 40px;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
    }
}

/**tab-every */
/deep/.el-tabs__item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 22px;
    margin-top: 14px;
}

/**tab底下1px线 */
/deep/.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e4e7ed;
}

/deep/.el-tabs__nav,
.is-top {
    margin-left: 9px;
}

.green-border {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(82, 196, 26, 1);
    border-radius: 50%;
    margin-right: 8px;
}

.red-border {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(251, 54, 63, 1);
    border-radius: 50%;
    margin-right: 8px;
}
</style>
